<template>
  <div class="login-wrap">
    <el-form class="login-container" :model="userModel" >
      <h1 class="title">修改密码</h1>
      <el-form-item  prop="userAccount" style="padding-bottom: 5px">
        <el-input type="text" v-model="userModel.userAccount" placeholder="账号" ></el-input>
      </el-form-item>
      <el-form-item  prop="checkPassword" style="padding-bottom: 5px">
        <el-input type="password" v-model="userModel.oldPassword" placeholder="原密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item  prop="password" style="padding-bottom: 5px">
        <el-input type="password" v-model="userModel.newPassword" placeholder="新密码" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="doBackPassword()" style="width: 100%;">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top: -10px;display: flex;justify-content: space-between">
        <el-link type="primary"></el-link>
        <el-link type="primary" @click="toLogin">返回登录</el-link>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>

import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import myAxios from "../../plugins/myAxios.js";
const router = useRouter();


const userModel = reactive({
  userAccount:'',
  oldPassword:'',
  newPassword:'',
})


//返回登录页
const toLogin = ()=>{
  router.push({path:'/login'});
}

/**
 * 确认找回密码  根据邮箱更新用户密码
 * @returns {Promise<boolean>}
 */
const doBackPassword = async ()=>{
  let userAccount = userModel.userAccount;
  if(userAccount.trim() === ''){
    return ElMessage({
      type:"info",
      message:"账号不能为空"
    })
  }

  if(userModel.oldPassword.trim() === ''){
    return ElMessage({
      type:"info",
      message:"原密码不能为空"
    })
  }

  if(userModel.newPassword.trim() === ''){
    return ElMessage({
      type:"info",
      message:"新密码不能为空"
    })
  }

  await myAxios.post('/user/forgotPasswordSubmit', {
    userAccount: userModel.userAccount,
    oldPassword:userModel.oldPassword,
    newPassword:userModel.newPassword
  }).then(res => {
    console.log(res)
    ElMessage({
      type:"success",
      message:"yes~!"
    })
    router.push({path: '/login'});
  }).catch(err => {
    ElMessage.error(err)
  })
}

</script>
<style scoped lang="less">
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url("../../assets/img/background.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.login-container {
  border-radius: 10px;
  margin: 0 auto;
  width: 400px;
  padding: 30px 35px 25px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0 auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
